{% extends "pages/auth/_layout.html" %}
{% from "components/macros.html" import submit_button %}
{% from "components/auth_macros.html" import auth_field, auth_banner %}

{% block title %}Create an account - {{ project_name }}{% endblock %}

{% block auth_form %}
<div x-data="registerForm()">
  <h1 class="text-2xl font-semibold text-white mb-2">Create an account</h1>
  <p class="text-sm text-aegis-muted mb-8">It takes a moment.</p>

  {# Native form POST for the same reason as /login: it is what makes the
     browser offer to save the new password. `autocomplete="new-password"`
     is what tells it this is a signup rather than a sign-in. #}
  <form action="/register" method="post" class="space-y-4" @submit="loading = true">
    {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}

    {{ auth_banner("error") }}

    {{ auth_field("full_name", "Name", autocomplete="name", required=False, placeholder="Ada Lovelace") }}
    {{ auth_field("email", "Email", type="email", autocomplete="username", placeholder="you@domain.com") }}
    {{ auth_field("password", "Password", type="password", autocomplete="new-password", minlength=8, placeholder="At least 8 characters") }}

    {{ submit_button("Create account", "Creating…") }}
  </form>
</div>

<script>
function registerForm() {
  return {
    loading: false,
    error: '',

    init() {
      const p = new URLSearchParams(window.location.search);
      const err = p.get('error');
      if (err === 'exists') {
        this.error = 'That email is already registered. Try signing in instead.';
      } else if (err === 'closed') {
        this.error = 'Signups are closed right now.';
      } else if (err === 'invalid') {
        this.error = 'Check the details and try again.';
      }
    },
  };
}
</script>
{% endblock %}

{% block auth_footer %}
Already have an account? <a href="/login" class="text-aegis-teal hover:text-white transition-colors">Sign in</a>.
{% endblock %}